<template>
  <div id="goods-detail">
    <div class="theInfo">
      <div style="width: 100%;" class="clearFloat">

        <ul class="infList">
          <li>
            <label>商品名称：</label>
            <span>{{ goodsInfo.goodsName }}</span>
          </li>
          <li v-if="goodsInfo.type == '2' ">
            <label>口味名称：</label>
            <span>{{ goodsInfo.tasteNameValue }}</span>
          </li>


          <li v-if="goodsInfo.type == '1' ">
            <label>支持口味：</label>
            <span>{{ goodsInfo.tasteNameValue }}</span>
          </li>

          <li v-if="goodsInfo.type == '1' " >
            <label >款式特点：</label>
            <span>{{ goodsInfo.tasteNameValue }}</span>
          </li>

          <li v-if="goodsInfo.type == '2' ">
            <label>尼古丁含量：</label>
            <span>{{ goodsInfo.nicotine+"%" }}</span>
          </li>

          <li v-if="goodsInfo.type == '2' ">
            <label>口味甜度：</label>
            <span>{{ goodsInfo.sweetNum }}</span>
          </li>

          <li v-if="goodsInfo.type == '2' ">
            <label>口味凉度：</label>
            <span>{{ goodsInfo.coolNum }}</span>
          </li>

          <li v-if="goodsInfo.type == '2' ">
            <label>口味浓郁度：</label>
            <span>{{ goodsInfo.richNum }}</span>
          </li>

          <li>
            <label>销售价：</label>
            <span>{{ goodsInfo.salePrice }}</span>
          </li>

        </ul>
      </div>
      <p style="margin: 15px 0;">
        <label>商品描述：</label>
        <span>{{ goodsInfo.goodsText ? goodsInfo.goodsText : "--" }}</span>
      </p>

      <div v-if="goodsInfo.listImgUrlList && goodsInfo.listImgUrlList.length" class="imgList">
        <label>商品列表图：</label>
        <div style="margin-top: 20px;">
          <img
              v-for="(item, index) in goodsInfo.listImgUrlList"
              :key="index"
              class="layui-upload-img smallPic"
              :src="item"
          >
        </div>
      </div>

      <div v-if="goodsInfo.detailImgUrlList && goodsInfo.detailImgUrlList.length" class="imgList">
        <label>商品详情图：</label>
        <div style="margin-top: 20px;">
          <img
              v-for="(item, index) in goodsInfo.detailImgUrlList"
              :key="index"
              class="layui-upload-img smallPic"
              :src="item"
          >
        </div>
      </div>

      <div v-if="goodsInfo.tasteImgUrlList && goodsInfo.tasteImgUrlList.length" class="imgList">
        <label>商品口感图：</label>
        <div style="margin-top: 20px;">
          <img
              v-for="(item, index) in goodsInfo.tasteImgUrlList"
              :key="index"
              class="layui-upload-img smallPic"
              :src="item"
          >
        </div>
      </div>

      <div v-if="goodsInfo.paramImgUrlList && goodsInfo.paramImgUrlList.length" class="imgList">
        <label>商品参数图：</label>
        <div style="margin-top: 20px;">
          <img
              v-for="(item, index) in goodsInfo.paramImgUrlList"
              :key="index"
              class="layui-upload-img smallPic"
              :src="item"
          >
        </div>
      </div>

      <div v-if="goodsInfo.securityCodeImgUrl && goodsInfo.securityCodeImgUrl.length" class="imgList">
        <label>防伪码图：</label>
        <div style="margin-top: 20px;">
          <img class="layui-upload-img smallPic" :src="goodsInfo.securityCodeImgUrl">
        </div>
      </div>

    </div>
    <p style="text-align: center;">{{ msg }}</p>
  </div>
</template>

<script>

export default {
  name: 'GoodsDetail',
  props: {
    goodsInfo: Object
  },

  data() {
    return {
      msg: ''
    }
  },
  created() {
    this.print11()
  },
  methods:{
    print11(){
      console.log("create ------------- ",this.goodsInfo)
    }
  },
  computed: {

  },

}
</script>

<style lang="scss" scope>
#goods-detail {
  padding: 20px 0;
  width: 80%;
  margin: 0 auto;
  font-size: 15px;
  .clearFloat::after {
    content: "";
    height: 0;
    line-height: 0;
    display: block;
    visibility: hidden;
    clear: both;
  }

  .theInfo .smallPic {
    width: 120px;
    height: 120px;
    margin: 0 10px 10px 0;
    border: 1px solid #eeeeee;
  }
  .theInfo .img {
    float: left;
    width: 220px;
    height: 220px;
    border: 1px solid #eeeeee;
  }
  .theInfo .img img {
    width: 100%;
    height: 100%;
  }
  .theInfo .infList {
    float: left;
    width: 65%;
    margin: 25px 0 0 20px;
  }
  .theInfo .infList li {
    margin-bottom: 10px;
  }

  // 对标商品
  .for-the-goods .clearFloat {
    position: relative;

    .img {
      width: 100px;
      height: 100px;
    }

    .infList {
      width: 50%;
      margin: 0 0 0 20px;

      p {
        font-size: 16px;
        line-height: 26px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box; //作为弹性伸缩盒子模型显示。
        -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
        -webkit-line-clamp: 2; //显示的行
      }
    }

    .price {
      position: absolute;
      top: 50%;
      right: 0;
      transform: translate(0, -50%);

      span {
        color: red;
      }
      .number {
        font-size: 26px;
        font-weight: bold;
        line-height: 26px;
      }
    }
  }
}
</style>
